<template>
	<view class="content">
		<view class="question" v-if="show">
			<view class="top">
				<view class="le" @tap="go_user_detail(question.userId)">
					<image :src="getRealPath(question.imgUrl)" mode=""></image>
					<text>{{question.nickName}}</text>
				</view>
				<image @tap="more" class="ri" src="../../static/images/sandian.png" mode=""></image>
			</view>
			<view class="title">
				{{question.questionTitle}}
			</view>
			<view class="desc">
				{{question.questionDesc}}
			</view>
			<view class="img" v-if="question.questionImgUrl.length!=0">
				<image :src="getRealPath(question.questionImgUrl)" mode="aspectFill" @tap="prevImg(question.questionImgUrl)"></image>
			</view>
			<view class="bottom">
				<view class="left">
					{{question.stars}} 赞同 · {{question.answers}} 回答
				</view>
				<view class="right">
					{{formatTime(question.createTime)}}
				</view>
			</view>
		</view>
		<view class="answer" v-for="(item,index) in answers" :key="index">
			<view class="top">
				<view class="le" @tap="go_user_detail(item.userId)">
					<image :src="getRealPath(item.imgUrl)" mode=""></image>
					<text>{{item.nickName}}</text>
				</view>
				<image class="ri" src="../../static/images/sandian.png" mode="" @tap="answermore(item.id,item.userId,index)"></image>
			</view>
			<view class="detail">
				{{item.content}}
			</view>
		</view>
		<view @tap="go_answer" v-if="answers.length==0&user.id!=question.userId" style="width: 100%;line-height: 300upx;font-size: 24upx; text-align: center; height: 300upx;">还没人回答哦,点击抢沙发~~</view>
		<view v-if="answers.length!=0" style="margin-bottom: 120upx;height: 80upx; font-size: 28upx;color: #999999;text-align: center; line-height: 80upx;width: 92;">{{content}}</view>
		<view @tap="yaoqing()" v-if="answers.length==0&&user.id==question.userId" style="width: 200upx;font-size: 30upx; 
		margin-top: 60upx;height: 80upx;line-height: 80upx;text-align: center; border: 1px solid #999999;color: #999999;border-radius: 10upx;">
			邀请回答
		</view>
		<view class="btn">
			<view @tap="star">
				<image :src="imgSrc" mode=""></image>
				<text :style="style">点赞</text>
			</view>
			<view @tap="go_add">
				<image src="../../static/images/comment.png" mode=""></image>
				<text>提问</text>
			</view>
			<view @tap="go_answer">
				<image src="../../static/images/bi.png" mode=""></image>
				<text style="color: #d81e06;">写回答</text>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['user', 'answerChange']),
		},
		data() {
			return {
				question: {

				},
				show: false,
				answers: [],
				pageId: 0,
				content: '',
				imgSrc: '../../static/images/dianzan.png',
				style: ''
			}
		},
		onLoad(option) {
			let id = option.questionId;
			let that = this;
			utils.post("question/getbyid",{
				questionId:id
			},function(data) {
				that.question = data;
				that.show = true;
				that.getAnswer(0, 0);
			},function(errMsg){
				uni.showModal({
					title: '错误通知',
					content: errMsg,
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {
						uni.navigateBack({
							delta: 1
						});
					},
					fail: () => {},
					complete: () => {}
				});
			})
			
		},
		onShow() {
			if (this.answerChange) {
				this.getAnswer(0, 0);
			}
		},
		onReachBottom() {
			if (this.content != "没有更多回答了") {
				let pId = this.pageId;
				this.getAnswer(pId + 1, 1);
			}
		},
		methods: {
			...mapMutations(['setQuestionChange']),
			yaoqing(){
				uni.navigateTo({
					url: 'success?questionId='+this.question.id+"&type=2",
				});
			},
			getAnswer(pageId, type) {
				let that = this;
				utils.get("question/getanswer", {
					questionId: this.question.id,
					pageId: pageId
				}, function(data) {
					if (type == 0) {
						that.content = "";
						that.answers = data;
					} else {
						if (data.length == 0) {
							that.content = "没有更多回答了"
						} else {
							that.answers.push.apply(that.answers, data);
							that.pageId++;
						}

					}
				});
			},
			delete() {
				let that= this;
				uni.showModal({
					title: '通知提醒',
					content: '确认删除?',
					showCancel: true,
					cancelText: '手滑了',
					confirmText: '删除',
					success: res => {
						if(res.confirm) {
							utils.post("question/deletequestion",{
								questionId:that.question.id,
								userId:that.user.id
							},function(data) {
								that.setQuestionChange({
									questionChange:true
								});
								uni.navigateBack({
									delta: 1
								});
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			deleteAnswer(id,index) {
				let that= this;
				uni.showModal({
					title: '通知提醒',
					content: '确认删除?',
					showCancel: true,
					cancelText: '手滑了',
					confirmText: '删除',
					success: res => {
						if(res.confirm) {
							utils.post("question/deleteanswer",{
								answerId:id,
								userId:that.user.id
							},function(data) {
								that.answers.splice(index,1);
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			answermore(id,userId,index){
				let that = this;
				if (this.user.id == userId) {
					uni.showActionSheet({
						itemList: ['分享', '删除'],
						success: res => {
							let inx = res.tapIndex;
							if (inx == 1) {
								that.deleteAnswer(id,index);
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.showActionSheet({
						itemList: ['分享'],
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			more() {
				let that = this;
				if (this.user.id == this.question.userId) {
					uni.showActionSheet({
						itemList: ['分享', '删除'],
						success: res => {
							let index = res.tapIndex;
							if (index == 1) {
								that.delete();
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.showActionSheet({
						itemList: ['分享'],
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			go_user_detail(userId) {
				uni.navigateTo({
					url: '../usercenter/userinfo?userId=' + userId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			go_add() {
				uni.navigateTo({
					url: 'add'
				});
			},
			formatTime(timestamp) {
				var da = new Date(timestamp);
				return (da.getMonth() + 1) + "-" + da.getDate();
			},
			star() {
				this.imgSrc = '../../static/images/questionzan.png';
				this.style = 'color:#d81e06';
				utils.post('question/star', {
					questionId: this.question.id
				}, function(data) {

				});
			},
			go_answer() {
				if(this.question.userId==this.user.id) {
					utils.errorToast("你不能回答自己的问题哦");
					return;
				}
				uni.navigateTo({
					url: 'answer?questionId=' + this.question.id + "&questionTitle=" + this.question.questionTitle,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			prevImg(url) {
				uni.previewImage({
					urls: [this.getRealPath(url)]
				})
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;

	}

	.img {
		width: 92%;
		height: 150upx;
		margin-top: 20upx;
	}

	.img image {
		width: 150upx;
		height: 150upx;
	}

	.detail {
		width: 92%;
		font-size: 26upx;
		margin-bottom: 50upx;
		margin-top: 50upx;
	}

	.ri {
		width: 30upx;
		height: 30upx;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
	}

	.btn {
		width: 100%;
		height: 90upx;
		background-color: #ffffff;
		box-shadow: inset 0px 1px 1px -1px #dcdcdc;
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.btn view {
		width: 33%;
		height: 90upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.btn view image {
		width: 36upx;
		height: 36upx;
	}

	.btn text {
		font-size: 26upx;
		margin-left: 8upx;
	}

	.answer {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		margin-top: 20upx;
	}

	.question {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
	}

	.top {
		width: 92%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;

	}

	.le {
		display: flex;
		flex-direction: row;
		height: 100upx;
		align-items: center;
	}

	.le image {
		width: 66upx;
		height: 66upx;
		border-radius: 66upx;

	}

	.le text {
		font-size: 28upx;
		margin-left: 20upx;
	}

	.ri {
		font-size: 26upx;
		color: #FF4040;
		text-align: center;

	}

	.title {
		width: 92%;
		font-size: 30upx;
		font-weight: 600;
		margin-top: 8upx;
	}

	.desc {
		width: 92%;
		font-size: 26upx;
		color: #7777777;
		margin-top: 20upx;
	}

	.bottom {
		width: 92%;
		height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		font-size: 22upx;
		color: #999999;
		height: 80upx;
		line-height: 80upx;

	}

	.right {
		font-size: 22upx;
		color: #999999;
		height: 80upx;
		line-height: 80upx;
	}
</style>
